// 用户列表模块入口
<template>
	<div
		class="user-list"
		v-loading="listLoading"
	>
		<div class="search">
			<div class="header">
				<div class="header-item">
					<el-button
      type="primary"
      plain
      @click="add_classification"
    >新增分类</el-button>
				</div>
			</div>
			<div class="header">
				<div class="header-item">
					用户分类:
					<el-input
						placeholder=""
						v-model="userSort"
						style="width: 200px"
					>
					</el-input>
				</div>
				<div class="header-item">
					用户名称:
					<el-input
						placeholder=""
						v-model="userName"
						style="width: 200px"
					>
					</el-input>
				</div>
				<el-button
					@click="search()"
					type="primary"
					size="small"
				>
					<i class="el-icon-search"></i>
					查询
				</el-button>
				<el-button
					@click="search()"
					type="primary"
					size="small"
				><i class="el-icon-refresh-left"></i>

					刷新
				</el-button>
			</div>
		</div>
		<!-- 数据展示 -->
		<el-table
			:data="list"
			element-loading-text="Loading"
			border
			fit
			highlight-current-row
		>
			<el-table-column
				align="center"
				label="用户ID"
				width="100"
			>
				<template slot-scope="scope">
					{{ scope.row.user_id }}
				</template>
			</el-table-column>
			<el-table-column
				label="用户名称"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.user_name }}
				</template>
			</el-table-column>
			<el-table-column
				label="用户分类"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.user_sort || "--"
					}}
				</template>
			</el-table-column>
			<el-table-column
				label="注册时间"
				align="center"
			>
				<template slot-scope="scope">
					{{ scope.row.create_time }}
				</template>
			</el-table-column>
			<el-table-column
				class-name="status-col"
				label="状态"
				align="center"
			>
				<template slot-scope="scope">
					<el-tag :type="statusFilter">
						{{ scope.row.status_desc
						}}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				prop="created_at"
				label="操作"
			>
				<template slot-scope="scope">
					<el-button
						@click.native.prevent="editUser(scope)"
						type="primary"
						size="small"
					>
						<i class="el-icon-edit"></i>
						编辑
					</el-button>
					<el-button
						@click.native.prevent="deleteUser(scope)"
						type="danger"
						size="small"
					>
						<i class="el-icon-delete"></i>
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页器 -->
		<el-pagination
			class="pagination"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="currentPage"
			:page-sizes="[100, 200, 300, 400]"
			:page-size="currentPageSize"
			layout="total, sizes, prev, pager, next, jumper"
			:total="paginationTotal"
		>
		</el-pagination>
	</div>
</template>

<script>
import { getUserList, deleteUser } from "@/api/user";

export default {
	data() {
		return {
			list: null,
			listLoading: true,
			// 用户分类
			userSort: "",
			// 用户名称
			userName: "",
			// 用户状态标识
			statusFilter(status) {
				const statusMap = {
					1: "success",
					2: "gray",
					0: "danger",
				};
				return statusMap[status];
			},
			// 当前页
			currentPage: 1,
			// 当前页大小
			currentPageSize: 10,
			// 当前数据总数
			paginationTotal: 0,
		};
	},
	created() {
		// 进入界面默认查询一次
		this.search();
	},
	methods: {
		/**
		 * @desc 查询数据
		 */
		search() {
			this.listLoading = true;
			let param = {
				size: this.currentPageSize,
				page: this.currentPage,
				user_sort: this.userSort,
				user_name: this.userName,
			};
			getUserList(param).then((response) => {
				this.list = response.data.user_list;
				this.paginationTotal = response.data.total;
				this.listLoading = false;
			});
		},
		/**
		 * @desc 监听分页器大小改变
		 */
		handleSizeChange(size) {
			this.currentPageSize = size;
			search();
		},
		/**
		 * @desc 监听当前页大小改变
		 */
		handleCurrentChange(page) {
			this.currentPage = page;
			search();
		},
	},
};
</script>
<style>
.search {
	display: flex;
	justify-content: space-between;
}

.header {
	margin-bottom: 20px;
	display: flex;
	justify-content: flex-start;
}

.header .header-item {
	margin-right: 20px;
}

.pagination {
	margin-top: 20px;
	float: right;
}
</style>
